<!-- 书籍详情页 -->
<template>
  <div class="all_box" v-model="book">
    <el-row class="book_about">
      <el-col :span="4" :offset="2" class="book_face">
        <img :src=book.faceAddr class="image" />
      </el-col>
      <el-col :span="7" :offset="1" class="book_charfile">
        <div class="charactor">
          <div class="cssBook">
            <span id="cssBookName">{{book.name}}</span>
          </div>
          <div class="cssBook">
            <el-link id="cssBookAuthor" target="_blank" :underline="false" :href='book.authorAddr' >
              {{book.author}}
            </el-link>
          </div>
          <div class="cssBook">
            <el-link id="cssBookRate" target="_blank" :underline="false" :href='book.rateAddr' icon="el-icon-star-on">
              {{book.rate}} 分
            </el-link>
          </div>
          <div class="cssBookIntro">
            <span>{{book.intro}}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="2" class="book_opration">
        <ul>
          <li>
            <!-- <el-button round icon="el-icon-download" @click="tapDownload(book.id, book.downAddr, book.downNum)">下载</el-button> -->
            <el-button round icon="el-icon-download" @click="tapDownloadFree(book.id, book.downAddr, book.downNum)"
              v-if="!book.price">下载</el-button>

            <el-button round icon="el-icon-sold-out"
              @click="tapDownloadSold(book.id, book.downAddr, book.downNum, book.price, book.name)" v-if="book.price">
              购买（¥{{book.price}}）</el-button>
          </li>
          <li>
            <el-button round icon="el-icon-s-goods" v-if="this.$store.getters.getBookCollectState"
              @click="tapCollection(book.id)">已收藏</el-button>
            <el-button round icon="el-icon-goods" v-if="!this.$store.getters.getBookCollectState"
              @click="tapCollection(book.id)">收藏</el-button>
          </li>
          <li>
            <el-button round icon="el-icon-warning" v-if="this.$store.getters.getBookReportState"
              @click="tapReport(book.id)">已举报</el-button>
            <el-button round icon="el-icon-close" v-if="!this.$store.getters.getBookReportState"
              @click="tapReport(book.id)">举报</el-button>
          </li>
          <li>
            <el-button round icon="el-icon-finished" @click="onlineRead(book.id)">在线阅读</el-button>
          </li>
        </ul>
      </el-col>
    </el-row>
    <hr />
    <el-row class="book_picture_row">
      <div class="book_picture_intro">书籍详情：</div>
      <div class="book_picture_div">
        <!-- <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image> -->
        <el-carousel :interval="4000" type="card" height="650px">
          <el-carousel-item v-for="url in urls" :key="url">
            <!-- <h3 class="medium">{{ item }}</h3> -->
            <el-image :key="url" :src="url"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-row>
    <el-row class="book_comment">
      <div class="comment_input">
        <!-- <el-input v-model="MyComment" placeholder="请输入你的评论..."></el-input> -->
      </div>
      <div>

      </div>
    </el-row>
  </div>
</template>

<!-- 定义JS变量 -->
<script>
  export default {
    created() {
      this.getBook()
      this.getBookCollectState()
      this.getBookReportState()
      this.getBookPic()
      this.getUserTokenInfo()
    },
    data() {
      return {
        MyComment: '',
        book: {},
        reportReason: 0,
        urls: [],
        user: {}
      }
    },
    methods: {
      async getBook() {
        const {
          data: res
        } = await this.$http.get(`/book/searchall/${this.$route.query.bookId}`)
        if (res.status !== 200) return this.$message.error('查询失败')
        this.book = res.data
        // console.log(this.book)
        // console.log("-----"+this.$children[0])
      },
      getBookPic() {
        this.$http.get(`/book/getBookPic/${this.$route.query.bookId}`).then(res => {
          // console.log(res.data.data)
          this.urls = res.data.data
        })
      },
      async getBookCollectState() {
        const {
          data: res
        } = await this.$http.get(
          `/book/getBookCollectState/${this.$store.getters.getUserId}/${this.$route.query.bookId}`)
        if (res.status !== 200) return this.$message.error('查询失败')
        // console.log("初始收藏状态： "+res.data)
        // console.log("-----"+this.$children[0])
        this.$store.commit('initBookCollectState', res.data)
      },
      async getBookReportState() {
        const {
          data: res
        } = await this.$http.get(
          `/book/getBookReportState/${this.$store.getters.getUserId}/${this.$route.query.bookId}`)
        if (res.status !== 200) return this.$message.error('查询失败')
        // console.log("初始举报状态： "+res.data)
        // console.log("-----"+this.$children[0])
        this.$store.commit('initBookReportState', res.data)
      },
      async getUserTokenInfo(){
        const {
          data: res
        } = await this.$http.get(`/user/getUserTokenInfo/${window.sessionStorage.getItem('userId')}`)
        this.user = res.data
        console.log(res.data)
      },
      tapDownloadFree(bookId, addr, downNum) {
        if (!this.$store.getters.getUserLoginState) {
          this.$message.error(' 请先登录')
          setTimeout(function() {
            window.open('/login', '_self')
            // this.$router.push('/login')
          }, 1000)
          return
        }
        if(!this.user.downRight){
          this.$message.error('对不起，无下载权限')
          return
        }

        // this.verifyDownload(addr)
        // console.log(bookId + "------" + addr)
        downNum++
        this.$http.put(`/userOper/download/${this.$store.getters.getUserId}/${bookId}`)
        this.$http.put(`/book/download/${bookId}/${downNum}`)
        window.open(addr)
        // window.open(addr)
      },
      tapDownloadSold(bookId,addr,downNum,price,bookName){
        if(!this.$store.getters.getUserLoginState){
          this.$message.error(' 请先登录')
          setTimeout(function(){
            window.open('/login','_self')
            // this.$router.push('/login')
          },1000)
          return
        }
        if(!this.user.downRight){
          this.$message.error('对不起，无下载权限')
          return
        }

        // this.verifyDownload(addr)
        console.log(bookId+"------"+addr)
        downNum++
        this.$http.put(`/userOper/download/${this.$store.getters.getUserId}/${bookId}`)
        this.$http.put(`/book/download/${bookId}/${downNum}`)
        // this.$router.push("/payment?bookId="+)
        this.$router.push({ name: 'payment',params:{userId:window.sessionStorage.getItem('userId'), bookId:bookId, bookName:bookName, bookPrice:price, downAddr:addr} })
        // window.open(addr)
      },
      tapCollection(bookId) {
        if (!this.$store.getters.getUserLoginState) {
          this.$message.error(' 请先登录')
          setTimeout(function() {
            window.open('/login', '_self')
            // this.$router.push('/login')
          }, 1000)
          return
        }
        // console.log(this.$store.getters.getBookCollectState)
        this.$store.commit('refreshBookCollectState')
        // console.log(this.$store.getters.getBookCollectState)

        if (this.$store.getters.getBookCollectState == 1) {
          this.$store.commit('increCollectionNum')
          this.$http.put(`/book/collections/${this.$store.getters.getUserId}/${bookId}/${1}`)
          this.$message.success("收藏成功")
        } else {
          this.$store.commit('decreCollectionNum')
          this.$http.put(`/book/collections/${this.$store.getters.getUserId}/${bookId}/${0}`)
          this.$message.success("已取消收藏")
        }
      },
      tapReport(bookId) {
        if (!this.$store.getters.getUserLoginState) {
          this.$message.error(' 请先登录')
          setTimeout(function() {
            window.open('/login', '_self')
            // this.$router.push('/login')
          }, 1000)
          return
        }

        this.$store.commit('refreshBookReportState')

        if (this.$store.getters.getBookReportState == 1) {
          this.$http.put(`/book/report/${this.$store.getters.getUserId}/${bookId}/${this.reportReason}`)
          this.$message.success("举报成功")
        } else {
          this.$http.put(`/book/report/${this.$store.getters.getUserId}/${bookId}`)
          this.$message.success("已取消举报")
        }
      },
      onlineRead(bookId) {
        if (!this.$store.getters.getUserLoginState) {
          this.$message.error(' 请先登录')
          setTimeout(function() {
            window.open('/login', '_self')
            // this.$router.push('/login')
          }, 1000)
          return
        }
        this.$router.push('/onlineRead')
      }
    }
  }
</script>


<!-- 防止组件冲突 -->
<style lang="less" scoped>
  .all_box {
    .book_about {
      position: relative;
      margin-bottom: 20px;

      .book_face {
        .image {
          width: 100%;
          display: block;
        }
      }

      .book_charfile {
        .charactor {
          .cssBook {
            #cssBookName {
              font-size: 30px;
              font-weight: bold;
            }

            #cssBookIntro {}
          }

        }
      }

      .book_opration {
        ul li {
          list-style: none;
          height: 50px;
        }
      }

    }

    .book_picture_row {
      margin-top: 30px;

      .book_picture_intro {
        font-size: 30px;
        margin-bottom: 40px;
      }

      .book_picture_div {

        // margin: 10px auto;
        // width: 70%;
        .el-carousel__item h3 {
          opacity: 0.75;
          margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
          // background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
          // background-color: #d3dce6;
        }

        .el-image {
          border: 3px solid black;
          height: 630px;
          // margin-bottom: 20px;
        }
      }
    }

    .book_comment {
      .comment_input {
        position: relative;
        width: 400px;
        left: 120px;
      }
    }
  }
</style>
